<template>
    <div>
        <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm" size="default" status-icon
            scroll-into-view-options="true">
            <el-form-item label="赠送积分：" prop="integral">
                <el-input v-model="ruleForm.integral" />
            </el-form-item>
            <el-form-item label="赠送成长值：" prop="growth">
                <el-input v-model="ruleForm.growth" />
            </el-form-item>
            <el-form-item label="积分购买限制：" prop="buy">
                <el-input v-model="ruleForm.buy" />
            </el-form-item>
            <el-form-item label="预告商品：" prop="commodity">
                <el-switch v-model="ruleForm.commodity" />
            </el-form-item>
            <el-form-item label="商品上架：" prop="putaway">
                <el-switch v-model="ruleForm.putaway" />
            </el-form-item>
            <el-form-item label="商品推荐：" prop="recommend">
                <span class="new">新品</span>
                <el-switch class="new" v-model="ruleForm.new" />
                <span class="new">推荐</span>
                <el-switch v-model="ruleForm.recommend" />
            </el-form-item>
            <el-form-item label="服务保证：" prop="type">
                <el-checkbox-group v-model="ruleForm.type">
                    <el-checkbox label="无忧退货" name="type" />
                    <el-checkbox label="快速退款" name="type" />
                    <el-checkbox label="免费包邮" name="type" />
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="详细页标题：" prop="title">
                <el-input v-model="ruleForm.title" />
            </el-form-item>
            <el-form-item label="详细页描述：" prop="describe">
                <el-input v-model="ruleForm.describe" />
            </el-form-item>
            <el-form-item label="商品关键字：" prop="keyword">
                <el-input v-model="ruleForm.keyword" />
            </el-form-item>
            <el-form-item label="商品备注：">
                <el-input v-model="ruleForm.remark" type="textarea" />
            </el-form-item>
            <el-form-item label="选择优惠方式：" prop="detail">
                <el-radio-group v-model="radio" @change="changeRadio">
                    <el-radio-button label="无优惠" />
                    <el-radio-button label="特惠促销" />
                    <el-radio-button label="会员价格" />
                    <el-radio-button label="阶梯价格" />
                    <el-radio-button label="满减价格" />
                </el-radio-group>
            </el-form-item>
            <el-form-item v-if="showRadio === '2'">
                <div>
                    <span>开始时间：</span>
                    <el-date-picker v-model="value" type="datetime" placeholder="选择开始时间" :size="size" />
                </div>
                <div class="mt">
                    <span>结束时间：</span>
                    <el-date-picker v-model="value" type="datetime" placeholder="选择结束时间" :size="size" />
                </div>
                <div class="mt">
                    <span>促销价格：</span>
                    <el-input v-model="ruleForm.sale" style="width: 214px;" />
                </div>
            </el-form-item>
            <el-form-item v-if="showRadio === '3'">
                <div>
                    <span>黄金会员： </span>
                    <el-input v-model="ruleForm.gold" style="width: 214px;" />
                </div>
                <div class="mt">
                    <span>白金会员： </span>
                    <el-input v-model="ruleForm.platinum
                    " style="width: 214px;" />
                </div>
                <div class="mt">
                    <span> 钻石会员： </span>
                    <el-input v-model="ruleForm.diamond" style="width: 214px;" />
                </div>
            </el-form-item>
            <el-form-item v-if="showRadio === '4'">
                <el-table :data="tableData1" border style="width: 100%">
                    <el-table-column prop="number" label="数量" width="150" align="center" />
                    <el-table-column prop="discount" label="折扣" width="150" align="center" />
                    <el-table-column prop="operation" label="操作" align="center" />
                </el-table>
            </el-form-item>
            <el-form-item v-if="showRadio === '5'">
                <el-table :data="tableData2" border style="width: 100%">
                    <el-table-column prop="full" label="满" width="150" align="center" />
                    <el-table-column prop="subtract" label="立减" width="150" align="center" />
                    <el-table-column prop="operation" label="操作" align="center" />
                </el-table>
            </el-form-item>
            <el-form-item class="button">
                <el-button class="before" @click="beforeClick">上一步，填写商品信息</el-button>
                <el-button type="primary" class="next" @click="nextClick">下一步，填写商品促销</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import * as api from '../../../request/api'
import useProduct from '../../../hooks/useProduct'
import dayjs from 'dayjs'
import type { CascaderProps } from 'element-plus'
import { useProductStore } from '../../../stores/addProduct'

// 日期选择器
const size = ref<'default' | 'large' | 'small'>('default')
const value = ref('')

// 单选框
const radio = ref('无优惠')
const showRadio = ref('1')
let name = ref("")
let { getproductData, productData } = useProduct(api.product.getProductCategoryList, {
    keyword: name
})
getproductData()
const props: CascaderProps = {
    lazy: true,
    lazyLoad(node, resolve) {
        console.log(productData);
        const { level } = node
        console.log(level);
        // const nodes = productData.forEach(element => {

        // });
        // Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.
        // resolve(nodes)
    },
}
// 如果上面表格条件完成 , 跳转下一步
let product = useProductStore()
const beforeClick = () => {
    product.$patch({
        active: product.active - 1
    })
    // console.log(product.active);
}
const nextClick = () => {
    product.$patch({
        active: product.active + 1
    })
    // console.log(product.active);
}

// 选择优惠方式
const changeRadio = () => {
    // console.log(radio);
    if (radio.value == '特惠促销') {
        showRadio.value = '2'
    } else if (radio.value == '会员价格') {
        showRadio.value = '3'
    } else if (radio.value == '阶梯价格') {
        showRadio.value = '4'
    } else if (radio.value == '满减价格') {
        showRadio.value = '5'
    } else {
        showRadio.value = '1'
    }
}

// 阶梯价格
const tableData1 = [
    {
        number: '',
        discount: '',
        operation: '删除 添加',
    }
]

// 满减价格
const tableData2 = [
    {
        full: '',
        subtract: '',
        operation: '删除 添加',
    }
]

const ruleForm = reactive({
    integral: 0,
    growth: 0,
    buy: 0,
    commodity: false,
    putaway: false,
    new: false,
    recommend: false,
    type: [],
    title: '',
    describe: '',
    keyword: '',
    remark: '',
    sale: '',
    gold: '',
    platinum: '',
    diamond: ''
})
</script>

<style scoped lang="scss">
.demo-ruleForm {
    width: 600px;
    margin-top: 60px;
    margin-left: 20px;
}

.weight {
    display: flex;

    .el-input {
        width: 300px;
        margin-right: 20px;
    }
}

.button {
    margin-left: 50px;
}

.new {
    margin-right: 10px;
}

.mt {
    margin-top: 10px;
}
</style>